<template>
	<div>
		
			<div>
			<el-menu
			  :default-active="activeIndex2"
			  class="el-menu-demo"
			  mode="horizontal"
			  @select="handleSelect"
			  background-color="#409EFF"
			  text-color="#fff"
			  active-text-color="#ffd04b">
			
			
			  <!-- <el-submenu index="1">
			    <template slot="title"><i class="el-icon-s-data"></i>课程管理</template>
			    <el-menu-item index="2-1">选项1</el-menu-item>
			    <el-menu-item index="2-2">选项2</el-menu-item>
			    <el-menu-item index="2-3">选项3</el-menu-item>
			    <el-submenu index="2-4">
			      <template slot="title">选项4</template>
			      <el-menu-item index="2-4-1">选项1</el-menu-item>
			      <el-menu-item index="2-4-2">选项2</el-menu-item>
			      <el-menu-item index="2-4-3">选项3</el-menu-item>
			    </el-submenu> -->
				
				
			  </el-submenu>
			   <el-menu-item index="2" style="width: 13%;"><i class="el-icon-s-grid" style="color: white;"></i>班级管理</el-menu-item>
			   <el-menu-item index="3"><i class="el-icon-s-grid" style="color: white;"></i>学员管理</el-menu-item>
			   <el-menu-item index="4"><i class="el-icon-s-grid" style="color: white;"></i>教师管理</el-menu-item>
			   <el-menu-item index="5"><i class="el-icon-s-grid" style="color: white;"></i>系统管理</el-menu-item>
		
			  <el-menu-item index="6" style="float: right;"><i class="el-icon-user" style="color: white;"></i>个人中心</el-menu-item>
			  <el-menu-item index="7" style="float: right;"><i class="el-icon-s-grid" style="color: white;"></i>处理中心</el-menu-item>
			  <el-menu-item index="8" style="float: right;"><i class="el-icon-bell" style="color: white;"></i>消息中心</el-menu-item>
			  <el-menu-item index="9" style="float: right;"><a href="https://www.ele.me" target="_blank"><i class="el-icon-goods" style="color: white;"></i>订单管理</a></el-menu-item>
			
			</el-menu>
			</div>
		
			
			
				
		<div>
			<el-row  class="tac">
				  
			  <el-col style="width: 13%;">
				 
			    <el-menu
			      default-active="1"
			      class="el-menu-vertical-demo"
			      @open="handleOpen"
			      @close="handleClose"
			      background-color="#409EFF"
			      text-color="#fff"
				  mode="vertical"
			      active-text-color="#ffd04b">
				  
			      <el-submenu index="1">
			        <template slot="title">
			          <i class="el-icon-location" style="color: white;"></i>
			          <span>课程管理</span>
			        </template>
			          <el-menu-item index="1-1">选项1</el-menu-item>
			          <el-menu-item index="1-2">选项2</el-menu-item>
			          <el-menu-item index="1-3">选项3</el-menu-item>
			      
			      </el-submenu>
				  
				  <el-submenu index="2">
				    <template slot="title">
				      <i class="el-icon-location" style="color: white;"></i>
				      <span>班级管理</span>
				    </template>
				  			     
				      <el-menu-item index="1-1">选项1</el-menu-item>
				      <el-menu-item index="1-2">选项2</el-menu-item>
				      <el-menu-item index="1-3">选项3</el-menu-item>
				  
				  </el-submenu>
			
			<el-submenu index="3">
			  <template slot="title">
			    <i class="el-icon-location" style="color: white;"></i>
			    <span>学员管理</span>
			  </template>
			    <el-menu-item index="1-1">选项1</el-menu-item>
			    <el-menu-item index="1-2">选项2</el-menu-item>
			    <el-menu-item index="1-3">选项3</el-menu-item>
			</el-submenu>
			
			
			<el-submenu index="4">
			  <template slot="title">
			    <i class="el-icon-location" style="color: white;"></i>
			    <span>订单管理</span>
			  </template>
			    <el-menu-item index="1-1">选项1</el-menu-item>
			    <el-menu-item index="1-2">选项2</el-menu-item>
			    <el-menu-item index="1-3">选项3</el-menu-item>
			</el-submenu>
			
			
			<el-submenu index="5">
			  <template slot="title">
			    <i class="el-icon-location" style="color: white;"></i>
			    <span>教师管理</span>
			  </template>
			    <el-menu-item index="1-1">选项1</el-menu-item>
			    <el-menu-item index="1-2">选项2</el-menu-item>
			    <el-menu-item index="1-3">选项3</el-menu-item>
			</el-submenu>
			
			
			<el-submenu index="6">
			  <template slot="title">
			    <i class="el-icon-location" style="color: white;"></i>
			    <span>统计分析</span>
			  </template>
			    <el-menu-item index="1-1">选项1</el-menu-item>
			    <el-menu-item index="1-2">选项2</el-menu-item>
			    <el-menu-item index="1-3">选项3</el-menu-item>
			</el-submenu>
			
			<el-submenu index="7">
			  <template slot="title">
			    <i class="el-icon-location" style="color: white;"></i>
			    <span>支付中心</span>
			  </template>
			    <el-menu-item index="1-1">选项1</el-menu-item>
			    <el-menu-item index="1-2">选项2</el-menu-item>
			    <el-menu-item index="1-3">选项3</el-menu-item>
			</el-submenu>
			
			
			<el-submenu index="8">
			  <template slot="title">
			    <i class="el-icon-location" style="color: white;"></i>
			    <span>系统管理</span>
			  </template>
			    <el-menu-item index="1-1">选项1</el-menu-item>
			    <el-menu-item index="1-2">选项2</el-menu-item>
			    <el-menu-item index="1-3">选项3</el-menu-item>
			  <!-- <el-submenu index="1-4">
			    <template slot="title">选项4</template>
			    <el-menu-item index="1-4-1">选项1</el-menu-item>
			  </el-submenu> -->
			</el-submenu>
			
			
			
			    </el-menu>
			  </el-col>
			  <router-view/> <!-- 引入数据页面-->
			</el-row>
		
	
				
		</div>
		
	</div>
	
	
</template>

<script>

 export default {
    data() {
      return {
	
        activeIndex: '1',
        activeIndex2: '6'
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    },
	methods: {
	      handleOpen(key, keyPath) {
	        console.log(key, keyPath);
	      },
	      handleClose(key, keyPath) {
	        console.log(key, keyPath);
	      }
	    }
  }
    
	
</script>
	
   




<style>
	
</style>
